import { DemoBlock } from 'demos';
import { toNumberFormat } from '@pxxtech/utils';

const Basic = () => {
  return (
    <>
      <DemoBlock title="千分位，并保留3位小数">
        {toNumberFormat(-5000000.0009, {
          minimumFractionDigits: '3',
        })}
      </DemoBlock>
      <DemoBlock title="带有字符的千分位，并保留3位小数">
        {toNumberFormat(-5000000.0009, {
          style: 'currency',
          currency: 'CNY',
          minimumFractionDigits: '3',
        })}
      </DemoBlock>
      <DemoBlock title="数值缩写">
        {toNumberFormat(-5000000.0009, {
          locales: 'zh-CN',
          notation: 'compact',
        })}
      </DemoBlock>
      <DemoBlock title="中文数值">
        {toNumberFormat(-5000000.0009, {
          locales: 'zh-Hans-CN-u-nu-hanidec',
        })}
      </DemoBlock>
      <DemoBlock title="带有单位的数值">
        <div>
          {toNumberFormat(-5000000.0009, {
            locales: 'zh-CN',
            style: 'unit',
            unit: 'meter',
          })}
        </div>
        <div>
          {toNumberFormat(-5000000.0009, {
            locales: 'zh-CN',
            style: 'unit',
            unit: 'hour-per-week',
          })}
        </div>
      </DemoBlock>
      <DemoBlock title="百分比">
        {toNumberFormat(95, {
          locales: 'zh-CN',
          style: 'unit',
          unit: 'percent',
          // signDisplay: 'always',
          // signDisplay: 'exceptZero',
        })}
        <div>
          <div>设置 signDisplay: 'always'，则输出：+95% 或 -95%</div>
          <div>
            在某些情况下（例如显示增量），即使数字为正数，也有助于显式显示符号，如：+95%或-95%。可设置signDisplay:
            'always'即可。排除输出+0%或-0%时设置signDisplay: 'exceptZero'即可。
          </div>
        </div>
      </DemoBlock>
    </>
  );
};

export default Basic;
